import React from 'react';
import PropTypes from 'prop-types';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';

import "./ECharts3.less";

export default class ECharts3Component extends React.Component {

    constructor(props) {
        super(props);
    };

    render() {
        const {id, width, height, chartWidth, chartHeight, containerClassName} =this.props;
        return (
            <div id={id} className={"eChart3Container " + containerClassName}
                 style={{ 'width':width, 'height':height, 'lineHeight':height,}}>
                <ReactEcharts ref="eChart3" option={this.getOption()} style={{width: chartWidth, height: chartHeight}}/>
            </div>
        );
    }

    getOption() {
        if (this.state) {
            const {option} = this.state;
            return option;
        } else {
            const {option} = this.props;
            return option;
        }
    }

    updateChart() {
        const {eChart3} = this.refs;
        let chartInstance = eChart3.getEchartsInstance();
        chartInstance.clear();
        chartInstance.setOption(this.getOption());
    }


    showTip(seriesIndex, dataIndex) {
        const {eChart3} = this.refs;
        let chartInstance = eChart3.getEchartsInstance();
        chartInstance.dispatchAction({
            type: 'showTip',
            seriesIndex,
            dataIndex
        });
    }

    hideTip() {
        const {eChart3} = this.refs;
        let chartInstance = eChart3.getEchartsInstance();
        chartInstance.dispatchAction({
            type: 'hideTip'
        });
    }

}

ECharts3Component.propTypes = {
    "id": PropTypes.string.isRequired,
    "width": PropTypes.string,
    "height": PropTypes.string,
    "chartWidth": PropTypes.string,
    "chartHeight": PropTypes.string,
    "containerClassName": PropTypes.string,
    "option": PropTypes.object
}

ECharts3Component.defaultProps = {
    "width": "100%",
    "height": "100%",
    "chartWidth": "100%",
    "chartHeight": "100%",
    "option": {
        series: []
    }
};